<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2021/10/11
  Time: 15:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
  <title>文件服务器</title>
<%--防止路径错误，抽取出根路径项目名等部分--%>
  <%
    pageContext.setAttribute("APP_PATH", request.getContextPath());
  %>
<%--  导入bootstrap以及jquery支持--%>
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" type="text/javascript"></script>
  <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
  <div class="row clearfix">
    <div class="col-md-20 column">
      <div class="page-header">
        <h1>
          <small>上传文件区域</small>
        </h1>
      </div>
    </div>
  </div>
  <div class="row clearfix">
    <div class="col-md-20 column">
      <form action="#" method="post" enctype="multipart/form-data" id="tf">
        <div class="form-group">
          <label for="uploadfile">File input</label>
          <input type="file" id="uploadfile" name="uploadfile" multiple="multiple">
          <p class="help-block" id="help-block" style="color: red;"></p>
        </div>
        <button type="button" class="btn btn-default" onclick="upload()">提交</button>
      </form>
    </div>
  </div>
  <div class="row clearfix">
    <div class="col-md-20 column">
      <div class="page-header">
        <h1>
          <small>服务器文件信息</small>
        </h1>
      </div>
    </div>
  </div>
  <div class="row clearfix">
    <div class="col-md-20 column">
      <table class="table table-hover table-striped" id="file_table" style="table-layout: fixed; word-break:break-all;">
        <thead>
          <tr>
            <th width="180px">UUID</th>
            <th width="150px">原始文件名</th>
            <th width="150px">文件类型</th>
            <th width="100px">文件大小</th>
            <th width="150px">创建时间</th>
            <th width="200px">文件保存目录</th>
            <th width="100px">文件元信息</th>
            <th width="50px">下载</th>
          </tr>
        </thead>
        <tbody>

        </tbody>
      </table>
    </div>
  </div>
</div>
<script type="text/javascript">

<%--  初始加载页面进行文件数据查询,使用ajax--%>
  $(function (){
    $.ajax({
      url:"${APP_PATH}/queryAllFiles",
      type:"POST",
      success:function(result){
        //1、解析并显示文件信息
        build_file_table(result);
      }
    });
  });

  //查询到的数据封装到,table具体位置.
  function build_file_table(result){
    //清空table表格
    $("#file_table tbody").empty();
    var files = result;
    //循环遍历多条数据,添加到table的tboby中.
    $.each(files,function (index,item){
      var fileUUID = $("<td></td>").append(item.uuid);
      var fileoriginalname = $("<td></td>").append(item.originalName);
      var filetype = $("<td></td>").append(item.type);
      var filesize = $("<td></td>").append(item.size).append("B");
      var filetime = $("<td></td>").append(item.time);
      var filecataLog = $("<td></td>").append(item.cataLog);
      var json = $("<td></td>").append($("<button></button>").attr("uuid",item.uuid).addClass("file_json_btn").append("查看文件元信息"));
      var a = $("<td></td>").append($("<a></a>").attr("href","${pageContext.request.contextPath}/fileDownload?fileUUID="+item.uuid).append("下载"));
      $("<tr></tr>").append(fileUUID).append(fileoriginalname).append(filetype)
              .append(filesize).append(filetime).append(filecataLog).append(json).append(a).appendTo("#file_table tbody");
    });
  }

  //为查看元信息按钮提供点击事件.发送ajax请求,从数据库获取文件信息.
  $(document).on("click",".file_json_btn",function(){
    var fileUUID = $(this).parents("tr").find("td:eq(0)").text();
    $.ajax({
      url:"${APP_PATH}/queryFileJSON?fileUUID="+fileUUID,
      type:"GET",
      success:function (result){
        alert("文件名："+result.originalName+"\n文件大小："+result.size+" B"+"\n文件上传时间："+result.time+"\n文件保存目录："+result.cataLog+"\n文件类型："+result.type);
      }
    });
  });

  //检查是否选择文件
  function check(){
    var file = document.getElementById("uploadfile").value;
    if(file.length==0||file==""){
      document.getElementById("help-block").innerHTML="还未选择文件，请添加文件";
      return false;
    }
    return true;
  }
  //使用ajax进行文件上传
  function upload(){
    if(check()){
      var form = new FormData(document.getElementById("tf"));
      $.ajax({
        url:"${APP_PATH}/fileUpload",
        type:"POST",
        data:form,
        processData:false,
        contentType:false,
        success:function (result){
          alert(result);
          location.reload();
        }
      });
    }else{
      return false;
    }
  }
</script>
</body>
</html>